//   import {Button} from 'antd'
//   import request from '@/utils/request'
import styles from './index.module.scss'
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
import logo from '../../assets/logo.png'
import { userLogin } from '@/store/actions/login'
import { useDispatch } from 'react-redux'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
const Login = () => {
  //   const test=()=>{
  //       request({url:'/channels'})
  //   }
  const dispatch = useDispatch()
  const history = useHistory()
  const [isLoading, setIsLoading] = useState(false)
  const onFinish = async (values) => {
    // 只有表单校验通过，才会到这里
    console.log('表单数据', values)
    // 发送请求，进行登录
    try {
      setIsLoading(true)
      await dispatch(userLogin(values))
      // 1.提示成功
      message.success('登录成功', 1, () => {
        // 2.页面跳转
        let pathName = '/home'
        if (history.location.state) {
          pathName = history.location.state.from || '/home'
        }
        // history.replace('/home')
        history.replace(pathName)
      })
    } catch (err) {
      // console.dir(err, '错误')
      // const msg = err.response || '登录失败'
      const msg = err.response.data.message || '登录失败,手机号或验证码不正确'
      // const msg = err
      // message.error(msg, 1, () => {})
      message.error(msg, 1)
    } finally {
      setIsLoading(false)
    }
  }
  return (
    <div className={styles.root}>
      {/* <Button onClick={test} type="primary">Button</Button> */}
      {/* （2） 所有子节点，都使用普通的 CSS 类名*/}
      <Card className='login-container'>
        <img className='login-logo' src={logo} alt='' />
        {/* 登录表单 */}
        <Form
          initialValues={{
            mobile: '13911111111',
            code: '246810',
            isAgree: true
          }}
          onFinish={onFinish}
          validateTrigger={['onBlur', 'onChange']}
          name='basic'
          autoComplete='off'
          size='large'
        >
          <Form.Item
            name='mobile'
            rules={[
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对' },
              { required: true, message: '请输入手机号' }
            ]}
          >
            <Input size='large' placeholder='请输入手机号' />
          </Form.Item>

          <Form.Item
            name='code'
            rules={[
              { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
              { required: true, message: '请输入验证码' }
            ]}
          >
            <Input size='large' placeholder='请输入验证码' maxLength={6} />
          </Form.Item>

          <Form.Item
            name='agree'
            valuePropName='checked'
            rules={[
              {
                validator (rule, value) {
                  if (value) {
                    return Promise.resolve()
                  } else {
                    return Promise.reject(new Error('请阅读并同意协议'))
                  }
                }
              }
            ]}
          >
            <Checkbox className='login-checkbox-label'>
              我已阅读并同意[隐私条款]和[用户协议]
            </Checkbox>
          </Form.Item>

          <Form.Item>
            <Button
              type='primary'
              htmlType='submit'
              size='large'
              block
              loading={isLoading}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login
